{% extends "base.html" %}
{% block title %}幼儿管理{% endblock %}
{% block head %}
    {{ super() }}
	<link href="/static/uikit/css/components/datepicker.css" rel="stylesheet" type="text/css" />
	<link href="/static/uikit/css/components/form-select.css" rel="stylesheet" type="text/css" />	
	<script src="/static/uikit/js/components/datepicker.js"></script>
	<script src="/static/uikit/js/components/form-select.js"></script>
	<script src="/static/uikit/js/components/upload.js"></script> 
	
	
<script>
    var vm	;
    ID = '{{ id }}';
    action = '{{ action }}';
	tuition='{{tuition}}'
function initVM(kid) {
     vm = new Vue({
		el: '#form-kid-add',
		data: kid,
		methods: {
			change:function(event){
			vm.deposit=vm.tuition
			},
		    submit: function (event) {
				event.preventDefault();
				this.date=document.getElementById("date").value
			    date= this.date +' 08:00:00'
			    date = js_strto_time(date)	
                if (! this.name.trim()) {
                    return alert('请输入名字');
                } 
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (! this.id_number.trim() |! reg.test(this.id_number)) {
                    return alert('请输入身份证号码或输入的身份证不合法')					
                }
                if (! this.address.trim()) {
                    return alert('请输入地址');
                }				
                if (! this.contacts1.trim()) {
                    return alert('请选择联系人');
                }				
                if (! this.con1_name.trim()) {
                    return alert('请输入联系人姓名');
                }				
                if (! this.con1_phone.trim()) {
                    return alert('请输入联系电话');
                }				
                if (!this.date) {
                    return alert('请选择入园时间');
                }
                var $form = $('#form-kid-add').find('form');
                    postJSON(action,{
					name:this.name,
					sex:this.sex,
					id_number:this.id_number,
					address:this.address,
					contacts1:this.contacts1,
					con1_name:this.con1_name,
					con1_phone:this.con1_phone,
					contacts2:this.contacts2,
					con2_name:this.con2_name,
					con2_phone:this.con2_phone,
					tuition:this.tuition,
					deposit:this.deposit,
					date:date,
					image:this.image,
					k_class:this.k_class,
				}, function (err, r) {
					if (err) {
						return alert(err.message || err.error || err);
					}
					else {
					    if (ID){
						    return location.assign('/kids');
						}
						else{
						    return location.assign('/kids/add');
						}
					}
				});
				}
			}
		})
}
$(function () {
    if (ID) {
 	    getJSON('/api/kid/' + ID, function (err, kid) {
            if (err) {
                return  (err);
            }
            initVM(kid);
			vm.date = kid.enter_date;
			document.getElementById("date").value = js_date_time(kid.enter_date);
			vm.image = kid.image;
			url=kid.image;
			loadimage(url);
        });
    }
    else {
        initVM({
            name:'',
			sex:'',
			id_number:'',
			address:'',
			contacts1:'',
			con1_name:'',
			con1_phone:'',
			contacts2:'',
			con2_name:'',
			con2_phone:'',
			tuition:tuition,
			deposit:tuition,			
			date:'',
			image:'',
			k_class:'',
			})
	}
	loadclasses('常规班')
	add_option('k_class',k_classes)
});

function loadclasses(t_type) { 
	var  xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
		{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			classes=xmlhttp.responseText;
			obj = JSON.parse(classes);
     		if (t_type=='常规班'){k_classes=obj.classes;}
			else{s_classes=obj.classes;}
		    }
		}
	xmlhttp.open("POST","/api/classes/"+t_type,false);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencode");
	xmlhttp.send();
};
 function add_option(type,classes,class_selected){
    var selectobj = document.getElementById(type);   
	for(var i=0;i<classes.length;i++){
		v = classes[i].id; //value
		name = classes[i].name;
		if (v==class_selected){opt = new Option(name,v,true,true);}
		else{opt = new Option(name,v);} 
		selectobj.options.add(opt);
		}
}


//显示照片
function loadimage(url) { 
	var  xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
		{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
			document.getElementById("photo").innerHTML='<img src="/'+xmlhttp.responseText+'"/>'
			}
		}
	xmlhttp.open("POST","/photo",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencode");
	xmlhttp.send(url);
	vm.image=url;
}

//时间转换为时间戳
function js_strto_time(str_time){
    var new_str = str_time.replace(/:/g,'-');
    new_str = new_str.replace(/ /g,'-');
	new_str = new_str.replace(/\//g,'-');
    var arr = new_str.split("-");
    var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
    return strtotime = datum.getTime()/1000;
}
function js_date_time(unixtime) {
    var timestr = new Date(parseInt(unixtime) * 1000);
    var datetime = timestr.toLocaleDateString().replace(/年|月/g, "-").replace(/日/g, " ");
    return datetime;
}


$(function(){

        var progressbar = $("#progressbar"),
            bar         = progressbar.find('.uk-progress-bar'),
            settings    = {

            action: '/upload', // 上传路径 url

            allow : '*.(jpg|jpeg|gif|png)', // 只允许上传图片

            loadstart: function() {
                bar.css("width", "0%").text("0%");
                progressbar.removeClass("uk-hidden");
            },

            progress: function(percent) {
                percent = Math.ceil(percent);
                bar.css("width", percent+"%").text(percent+"%");
            },

            allcomplete: function(response) {

                bar.css("width", "100%").text("100%");

                setTimeout(function(){
                    progressbar.addClass("uk-hidden");
                }, 250);
				loadimage(response)
            }
        };

        var select = UIkit.uploadSelect($("#upload-select"), settings),
            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    });


</script>

{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">幼儿管理</div>
	<div class="uk-panel-li"><a href="/kids/add">幼儿入园</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/kids">幼儿信息列表</a></div>
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/kid">幼儿详细信息</a></div>
	<div class="line"></div>	
	<br>
	<div class="uk-panel-li"><a href="/rollcall">点名</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/rollcall/modify">点名信息修改</a></div> 
	<div class="line"></div>	
	<div class="uk-panel-li"><a href="/attendance">考勤信息</a></div>
	<div class="line"></div>
	<br>

</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="/">幼儿管理 </a></div>
<div class="divmain-title">幼儿入园登记</div>				

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li class="uk-active"><a href="#">基本信息</a></li>
	<li><a href="#">加入照片</a></li>
	
</ul>

<ul id="tab-content" class="uk-switcher uk-margin">
	<li class="uk-active">				

<div class="divmain" id="form-kid-add" >
<form  v-on="submit: submit" class="uk-form uk-form-horizontal">

<div class="uk-form-row ">
	<label class="uk-form-label" for="name">名字:</label>
	<div class="uk-form-controls">
		<input v-model="name" id="name" type="text"  placeholder="名字" >
	</div>
</div> 	

<div class="uk-form-row">
	<label class="uk-form-label">性别:</label>
	<div class="uk-form-controls  uk-form-controls-text"> 						
		<label><input v-model="sex" type="radio" name="radio" value="男">男</label>
		<label><input v-model="sex" type="radio" name="radio" value="女">女</label>							
	</div>
</div>

<div class="uk-form-row">
<label class="uk-form-label">身份证号码：</label>
	<div class="uk-form-controls ">
		<input v-model="id_number" type="text"  placeholder="身份证号码" class="">{{'{{'}} id_number{{'}}'}} 
	</div>
</div>	
<div class="uk-form-row">
	<label class="uk-form-label">家庭住址：</label>
	<div class="uk-form-controls">
		<input v-model="address" type="text"  placeholder="家庭住址" class="">
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">联系人关系:</label>
	<div class="uk-form-controls uk-form-controls-text">
		<select v-model="contacts1" >
			<option value="父亲">父亲</option>
			<option value="母亲">母亲</option>
			<option value="祖父">祖父</option>
			<option value="祖母">祖母</option>
			<option value="其他">其他</option>
		</select>	 
	</div>
</div>  


<div class="uk-form-row">
	<label class="uk-form-label">联系人姓名：</label>
	<div class="uk-form-controls">
		<input v-model="con1_name" type="text"  placeholder="联系人姓名" class="">
	</div>
</div>

<div class="uk-form-row">
	<label class="uk-form-label">联系人电话：</label>
	<div class="uk-form-controls">
		<input v-model="con1_phone" type="text"  placeholder="联系人电话" class="">
	</div>
</div>
<div class="uk-form-row">
	<label class="uk-form-label">联系人关系:</label>
	<div class="uk-form-controls uk-form-controls-text">
		<select v-model="contacts2">
			<option value="父亲">父亲</option>
			<option value="母亲">母亲</option>
			<option value="祖父">祖父</option>
			<option value="祖母">祖母</option>
			<option value="其他">其他</option>
		</select>
	</div>
</div>   
<div class="uk-form-row">
	<label class="uk-form-label">联系人姓名：</label>
	<div class="uk-form-controls">
		<input v-model="con2_name" type="text"  placeholder="联系人姓名" class="">
	</div>
</div>
<div class="uk-form-row">
	<label class="uk-form-label">联系人电话：</label>
	<div class="uk-form-controls">
		<input v-model="con2_phone" type="text"  placeholder="联系人电话" class="">
	</div>
</div>
<div class="uk-form-row">
	<label class="uk-form-label">学费:</label>
	<div class="uk-form-controls">
		<input v-model="tuition" v-on="change:change" type="text"  placeholder="学费" class="">  
	</div>
</div>
<div class="uk-form-row">
	<label class="uk-form-label">入园押金:</label>
	<div class="uk-form-controls">
		<input v-model="deposit" type="text" readonly="readonly" placeholder="入园押金" >	
	</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">入园时间:</label>
	<div class="uk-form-controls">
		<input id="date" v-model="date" type="text" data-uk-datepicker="{format:'YYYY-MM-DD'}" placeholder="选择进入时间">
	</div>
</div>
<div class="uk-form-row">	
	<label class="uk-form-label">所在班级:</label>
	<div class="uk-form-controls uk-form-controls-text">
		<select v-model="k_class" id="k_class">
			<option value=''></option>
		</select>
	</div>	
</div>		
<div class="divbutton">
<button type="submit" class="uk-button uk-button-primary"> 加入</button>
</div>

</form>
</div>

</li>

<li>						
<div class="divmain" id="form-kid-add" >					
	<div id="upload-drop" class="uk-placeholder uk-text-center">
		<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 将文件拖拽至此 或 <a class="uk-form-file"><input id="upload-select" type="file"></a>.
	</div>
	<div id="progressbar" class="uk-progress uk-hidden">
		<div class="uk-progress-bar" style="width: 0%;">0%</div>
	</div>						
		<div id="divphoto">
	 <div id="photo">
	
	 </div>
	</div>
</div>						
</li>
					
</ul>
{%endblock%}
             